<template>
    <div>
      <el-form
        :model="obj"
        class="demo-ruleForm"
        :style="style_obj"
      >
        <div v-for="(item,index) in list"  :style="style_div" :key="'put-'+index">
          <el-form-item :label="item.title" :size="item.size||size||''" :label-width="item.title?(item.label_width||label_width):''" >
            <el-input :disabled="item.disabled || put_disabled" v-if="!item.type" :style="{width:item.width||'100%'}"  :placeholder="item.placeholder||''"
              v-model="obj[item.v_name]"
            ></el-input>
            <el-select :disabled="item.disabled || put_disabled" :multiple="item.multiple" v-else-if="item.type == '1'" :style="{width:item.width||'100%'}" :ref="'cascaderDept'+index" @change="handleChange(item,index)" v-model="obj[item.v_name]" :placeholder="item.placeholder||''" :clearable="item.clearable">
              <el-option
                v-for="ite in (item.options||[])"
                :key="ite.value"
                :label="ite.label"
                :value="ite.value">
              </el-option>
            </el-select>
            <el-cascader
            v-else-if="item.type == '2'" 
            :disabled="item.disabled || put_disabled"
            :clearable="item.clearable"
            :style="{width:item.width||'100%'}" 
            :placeholder="item.placeholder||''"
            v-model="obj[item.v_name]"
            :options="item.options||[]"
            :props="item.props||{}"
            :ref="'cascaderDept'+index"
            :collapse-tags="item.collapse"  
            @change="handleChange(item,index)">
            </el-cascader>
            <el-time-select
              v-else-if="item.type == '3'" 
              :align="item.align||'center'"
              :clearable="item.clearable !== false"
              :style="{width:item.width||'100%'}" 
              :placeholder="item.placeholder||''"
              v-model="obj[item.v_name]"
              :picker-options="item.picker_options||{}"
              @change="handleChange(item,index)"
            >
            </el-time-select>
            <el-time-picker
              v-else-if="item.type == '4'" 
              :clearable="item.clearable !== false"
              :style="{width:item.width||'100%'}" 
              :placeholder="item.placeholder||''"
              v-model="obj[item.v_name]"
              :is-range="item.is_range"
              :arrow-control="item.arrow_control"
              :range-separator="item.range_separator||'~'"
              :start-placeholder="item.start_placeholder||'开始时间'"
              :end-placeholder="item.end_placeholder||'结束时间'"
              @change="handleChange(item,index)"
            >
            </el-time-picker>
            <el-date-picker
              v-else-if="item.type == '5'" 
              :clearable="item.clearable !== false"
              :style="{width:item.width||'100%'}" 
              :placeholder="item.placeholder||''"
              v-model="obj[item.v_name]"
              :align="item.align||'right'"
              :type="item.date_type||'date'"
              range-separator="~"
              :start-placeholder="item.start_placeholder||'开始日期'"
              :end-placeholder="item.end_placeholder||'结束日期'"
              :picker-options="item.pickerOptions||{}"
              @change="handleChange(item,index)"
            >
            </el-date-picker>
            <el-radio-group  v-else-if="item.type == '6'" @change="handleChange(item,index)"  v-model="obj[item.v_name]"  :style="{width:item.width||'100%'}" >
              <el-radio v-for="(ite,dex) in (item.options||[])" :key="dex" :label="ite.value">{{ite.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
    </div>
    
</template>
<script>
// <addMessage :list="my_list" :my_obj="my_obj" :save="save" @getMsg="getMsg" >
//  my_list:[
  //   {
  //     v_name:'name',
  //     title:'名字：'
  //   },
  //   {
  //     v_name:'time1',
  //     title:'时间1：',
  //     type:3,
  //     fn:(res)=>{  //值发生变化时触发
  //       console.log(res)
  //     },
  //   },
  //   {
  //     v_name:'time2',
  //     title:'时间2：',
  //     type:4,
  //     fn:(res)=>{  //值发生变化时触发
  //       console.log(res)
  //     },
  //     is_range:true,  //是否开启多选
  //   },
  //   {
  //     v_name:'c',
  //     title:'单选：',
  //     type:6,
  //     fn:(res)=>{  //值发生变化时触发
  //       console.log(res)
  //     },
  //     options:[{
  //       label:'选项1',
  //       value:'1'
  //     },{
  //       label:'选项2',
  //       value:'2'
  //     },{
  //       label:'选项3',
  //       value:'3'
  //     },{
  //       label:'选项4',
  //       value:'4'
  //     },{
  //       label:'选项5',
  //       value:'5'
  //     }]
  //   },
  //   {
  //     v_name:'time3',
  //     title:'日期1：',
  //     type:5,
  //     date_type:'daterange',  //日期的类型
  //     pickerOptions:{  //快捷
  //       shortcuts: [{
  //         text: '最近一周',
  //         onClick(picker) {
  //           const end = new Date();
  //           const start = new Date();
  //           start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  //           picker.$emit('pick', [start, end]);
  //         }
  //       }, {
  //         text: '最近一个月',
  //         onClick(picker) {
  //           const end = new Date();
  //           const start = new Date();
  //           start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  //           picker.$emit('pick', [start, end]);
  //         }
  //       }]
  //     },
  //     fn:(res)=>{  //值发生变化时触发
  //       console.log(res)
  //     },is_range:true,
  //   },
  //   {
  //     v_name:'age',
  //     title:'年龄：'
  //   },
  //   {
  //     v_name:'old',
  //     type:1,
  //     title:'年龄：',
      
  //     options:[{
  //       value: '选项1',
  //       label: '黄金糕'
  //     }, {
  //       value: '选项2',
  //       label: '双皮奶'
  //     }, {
  //       value: '选项3',
  //       label: '蚵仔煎'
  //     }, {
  //       value: '选项4',
  //       label: '龙须面'
  //     }, {
  //       value: '选项5',
  //       label: '北京烤鸭'
  //     }],
  //   },
  //   {
  //     v_name:'aa',
  //     type:2,  //输入框类型
  //     title:'年龄：',
  //     fn:(res)=>{  //值发生变化时触发
  //       console.log(res)
  //     },
  //     props: { checkStrictly: true, emitPath: false},  //控制多选的样式
  //     choose_hidden:true,  //是否选择后隐藏
  //     options:[{  //多选的数据
  //       value: 'zhinan',
  //       label: '指南',
  //       children: [{
  //         value: 'shejiyuanze',
  //         label: '设计原则',
  //         children: [{
  //           value: 'yizhi',
  //           label: '一致'
  //         }, {
  //           value: 'fankui',
  //           label: '反馈'
  //         }, {
  //           value: 'xiaolv',
  //           label: '效率'
  //         }, {
  //           value: 'kekong',
  //           label: '可控'
  //         }]
  //       }, {
  //         value: 'daohang',
  //         label: '导航',
  //         children: [{
  //           value: 'cexiangdaohang',
  //           label: '侧向导航'
  //         }, {
  //           value: 'dingbudaohang',
  //           label: '顶部导航'
  //         }]
  //       }]
  //     }, {
  //       value: 'zujian',
  //       label: '组件',
  //       children: [{
  //         value: 'basic',
  //         label: 'Basic',
  //         children: [{
  //           value: 'layout',
  //           label: 'Layout 布局'
  //         }, {
  //           value: 'color',
  //           label: 'Color 色彩'
  //         }, {
  //           value: 'typography',
  //           label: 'Typography 字体'
  //         }, {
  //           value: 'icon',
  //           label: 'Icon 图标'
  //         }, {
  //           value: 'button',
  //           label: 'Button 按钮'
  //         }]
  //       }, {
  //         value: 'form',
  //         label: 'Form',
  //         children: [{
  //           value: 'radio',
  //           label: 'Radio 单选框'
  //         }, {
  //           value: 'checkbox',
  //           label: 'Checkbox 多选框'
  //         }, {
  //           value: 'input',
  //           label: 'Input 输入框'
  //         }, {
  //           value: 'input-number',
  //           label: 'InputNumber 计数器'
  //         }, {
  //           value: 'select',
  //           label: 'Select 选择器'
  //         }, {
  //           value: 'cascader',
  //           label: 'Cascader 级联选择器'
  //         }, {
  //           value: 'switch',
  //           label: 'Switch 开关'
  //         }, {
  //           value: 'slider',
  //           label: 'Slider 滑块'
  //         }, {
  //           value: 'time-picker',
  //           label: 'TimePicker 时间选择器'
  //         }, {
  //           value: 'date-picker',
  //           label: 'DatePicker 日期选择器'
  //         }, {
  //           value: 'datetime-picker',
  //           label: 'DateTimePicker 日期时间选择器'
  //         }, {
  //           value: 'upload',
  //           label: 'Upload 上传'
  //         }, {
  //           value: 'rate',
  //           label: 'Rate 评分'
  //         }, {
  //           value: 'form',
  //           label: 'Form 表单'
  //         }]
  //       }, {
  //         value: 'data',
  //         label: 'Data',
  //         children: [{
  //           value: 'table',
  //           label: 'Table 表格'
  //         }, {
  //           value: 'tag',
  //           label: 'Tag 标签'
  //         }, {
  //           value: 'progress',
  //           label: 'Progress 进度条'
  //         }, {
  //           value: 'tree',
  //           label: 'Tree 树形控件'
  //         }, {
  //           value: 'pagination',
  //           label: 'Pagination 分页'
  //         }, {
  //           value: 'badge',
  //           label: 'Badge 标记'
  //         }]
  //       }, {
  //         value: 'notice',
  //         label: 'Notice',
  //         children: [{
  //           value: 'alert',
  //           label: 'Alert 警告'
  //         }, {
  //           value: 'loading',
  //           label: 'Loading 加载'
  //         }, {
  //           value: 'message',
  //           label: 'Message 消息提示'
  //         }, {
  //           value: 'message-box',
  //           label: 'MessageBox 弹框'
  //         }, {
  //           value: 'notification',
  //           label: 'Notification 通知'
  //         }]
  //       }, {
  //         value: 'navigation',
  //         label: 'Navigation',
  //         children: [{
  //           value: 'menu',
  //           label: 'NavMenu 导航菜单'
  //         }, {
  //           value: 'tabs',
  //           label: 'Tabs 标签页'
  //         }, {
  //           value: 'breadcrumb',
  //           label: 'Breadcrumb 面包屑'
  //         }, {
  //           value: 'dropdown',
  //           label: 'Dropdown 下拉菜单'
  //         }, {
  //           value: 'steps',
  //           label: 'Steps 步骤条'
  //         }]
  //       }, {
  //         value: 'others',
  //         label: 'Others',
  //         children: [{
  //           value: 'dialog',
  //           label: 'Dialog 对话框'
  //         }, {
  //           value: 'tooltip',
  //           label: 'Tooltip 文字提示'
  //         }, {
  //           value: 'popover',
  //           label: 'Popover 弹出框'
  //         }, {
  //           value: 'card',
  //           label: 'Card 卡片'
  //         }, {
  //           value: 'carousel',
  //           label: 'Carousel 走马灯'
  //         }, {
  //           value: 'collapse',
  //           label: 'Collapse 折叠面板'
  //         }]
  //       }]
  //     }, {
  //       value: 'ziyuan',
  //       label: '资源',
  //       children: [{
  //         value: 'axure',
  //         label: 'Axure Components'
  //       }, {
  //         value: 'sketch',
  //         label: 'Sketch Templates'
  //       }, {
  //         value: 'jiaohu',
  //         label: '组件交互文档'
  //       }]
  //     }]
  //   },
  // ],
  // my_handle:[
  //   {
  //     name:'搜索',
  //     icon:'el-icon-search',
  //     fn:(res)=>{
  //       console.log(res)
  //     },
  //     type:'success'
  //   },
  //   {
  //     name:'重置',
  //     icon:'',
  //     fn:'',
  //     margin_all:'0 0 15px 0'
  //   }
  // ],
      
export default {
    props:{
      label_width:{  //左侧小标题的宽度
        type:String,
        default:'100px',
      },
      size:{  //input框的大小
        type:String,
        default:'small',
      },
      style_obj:{  //控制大盒子的样式
        type:Object,
        default:()=>{
          return {}
        }
      },
      style_div:{  //控制每个input框盒子的样式
        type:Object,
        default:()=>{
          return {width:'45%'}
        }
      },
      list:{  //数据
        type:Array,
        default:[]
      },
      my_obj:{  //表单的数据
        type:Object,
        default:()=>{
          return {}
        }
      },
      save:{  //获取表单数据
        type:Number,
        default:0
      },
      put_disabled:{  //是否可编辑表单数据
        type:Boolean,
        default:false
      },
    },
    watch:{
      my_obj(){  //赋值
        this.obj = JSON.parse(JSON.stringify(this.my_obj));
      },
      save(){ //该值发生变化就获取表格数据
        this.$emit('getMsg',this.obj);
      }
    },
   
    data () {
      return {
        obj:{

        },
        size_obj:{ //input框的大小
          medium:'cyj_input_medium',
          small:'cyj_input_small',
          mini:'cyj_input_mini',
        },
        size_button:{
          medium:'cyj_button_medium',
          small:'cyj_button_small',
          mini:'cyj_button_mini',
        }
      }
    },
    created(){
      this.obj = JSON.parse(JSON.stringify(this.my_obj));
    },
    mounted(){
      
    },
    methods: {
        handleChange(e,index){ //选择的值发生改变
          if(e.choose_hidden){  //不知道为啥隐藏不了
            let a;
            a = this.$refs['cascaderDept'+index];
            a.dropDownVisible = false;
          }
          if(e.fn){
            e.fn({name:e.v_name,value:this.obj[e.v_name],all:this.obj});
          }
          
        }
　　}
}
</script>

<style scoped>
.demo-ruleForm{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.cyj-input-view{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
</style>
